<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="./../template/common.xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"

    xmlns:p="http://primefaces.org/ui">

    <ui:define name="title">
        Course-Create
    </ui:define>
    <ui:define name="head">
        <!--        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />-->
        <script src="../../res/js/jquery-1.10.2.min.js"></script>
        <script src="../../res/js/jquery-ui-1.10.0.custom.js"></script>

        <script type="text/javascript">
            $(function() {
                $(".c1").datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true,
                    changeYear: true
                });
            });

        </script>
        <script>
            $(function() {
                $(document).tooltip();
            });
        </script>
        <style>
            label {
                display: inline-block;
                width: 100px;
            }
        </style>
           <link rel="stylesheet" href="../../res/css/admin-style.css"/>
    </ui:define>
    <ui:define name="pageheader">
        Course create
    </ui:define>

    <ui:define name="content">
        <h:form id="f11">
            <table border="0" cellpadding="0" cellspacing="0"  id="id-form">
                <tr>
                    <th valign="top">Center:</th>
                    <td>
                        <h:selectOneMenu id="allCenter"   value="#{courseManager.center}" converter="#{centerConverter}" styleClass="inp-form">
                            <f:selectItems value="#{courseManager.allCenter}" var="c" itemLabel="#{c.name}" itemValue="#{c}" />
                        </h:selectOneMenu>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <th valign="top">Name:</th>
                    <td><h:inputText value="#{courseManager.name}"  styleClass="inp-form pl" alt="&lt;Course name here&gt;" title="Enter name."/></td>
                    <td>

                    </td>
                </tr>

                <tr>
                    <th valign="top">Start date</th>
                    <td>
                        <h:inputText  value="#{courseManager.startDate}" validatorMessage="Start date is required"  styleClass="inp-form c1" alt="&lt;Start Date here&gt;" title="Choose start date.">
                            <f:validateRequired ></f:validateRequired>
                            <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+7"/>
                        </h:inputText>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th valign="top" title="End date" style="color: black;">End date</th>
                    <td>
                        <h:inputText value="#{courseManager.endDate}" validatorMessage="End date is required"  styleClass="inp-form dbEnd" alt="&lt;End Date here&gt;" title="Choose end date.">
                                <f:validateRequired ></f:validateRequired>
                                <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+7"/>
                            </h:inputText>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <th valign="top">Status:</th>
                    <td>
                        <h:selectOneMenu   value="#{courseManager.status}" label="#{courseStatus.getDisplayName(courseManager.status)}"  styleClass="inp-form" >
                            <f:selectItems value="#{courseStatus.all}" var="c" itemLabel="#{c.display}" itemValue="#{c.value}" />
                        </h:selectOneMenu>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <th>&nbsp;</th>
                    <td valign="top">
                        <h:commandButton actionListener="#{courseManager.docreate}" class="buttons"  />
                        <input type="reset" class="form-reset" value="" />
                    </td>
                    <td></td>
                </tr>

            </table>
            <p:growl id="g1"  showDetail="true" />
        </h:form>

    </ui:define>
</ui:composition>
